<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>class处理数组</title>
    <style>
        .active {
            width: 150px;
            height: 150px;
            border: 1px solid pink
        }

        .error {
            background-color: blue;
        }

        .fontStyle {
            font-size: 25px
        }
    </style>
</head>

<body>
    <div class="app">
        <div :class="[activeClass,errorClass,{fontStyle: isFontStyle}]">我是盒子</div>
        <!-- 对象方式的简写 -->
        <div :class="objStyle">我是盒子</div>
        <!-- 数组方式的简写 -->
        <div :class="arrStyle">我是盒子</div>
        <button @click="handle">切换</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var xm = new Vue({
            el: '.app',
            data: {
                activeClass: 'active',
                errorClass: 'error',
                isFontStyle: true,
                objStyle: {
                    active: true,
                    error: true
                }, 
                arrStyle: ['active','error']
            },

            methods: {
                handle() {
                    this.errorClass = ''
                    this.objStyle.error = false
                }
            }

        })

    </script>
</body>

</html>